<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 获取路由器实例
const router = useRouter();

// 示例数据
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img: './404.png',
    routePath: '/page5' // 目标路由路径
  },
  // ...其他对象保持不变，确保每个对象都有一个routePath属性
]);
// 定义 navigateTo 方法，用于编程式导航
// 定义 navigateTo 方法，用于编程式导航并传递图片地址
const navigateTo = (path, imgSrc) => {
  // 使用 query 参数传递图片地址
  router.push({ path, query: { img: imgSrc } });
  
  // 或者使用命名路由和 params 参数（假设目标路由有名称）
  // router.push({ name: 'Details', params: { img: imgSrc } });
};
</script>

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <!-- 使用作用域插槽来自定义 img 列 -->
      <el-table-column label="Image">
        <template #default="scope">
          <img
            :src="scope.row.img"
            alt="Image"
            style="width: 50px; height: auto; cursor: pointer;"
             @click="navigateTo(scope.row.routePath, scope.row.img)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
/* 可以在这里添加样式 */
</style>